<template>
	<!-- 登录 -->
	<view class="mylog">
		<u-notify ref="uNotify"></u-notify>
		<view>
			<u--input placeholder="请输入注册用户名" border="surround" v-model="user.username"
				style="width: 260px;height: 30px;margin-left: 16%;"></u--input>
		</view>
		<view>
			<u--input placeholder="请输入注册密码" border="surround" :password='true' v-model="user.password"
				style="width: 260px;height: 30px;margin-left: 16%;margin-top: 20px;"></u--input>
		</view>
		<u-button type="success" text="注册" style="width: 280px;height: 50px;margin-left: 16%;margin-top: 30px;"
			@click="sign"></u-button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				reg:/^[a-zA-Z\d]{8,16}$/,
				user: {
					username: "",
					password: ""
				}
			};
		},
		methods: {
			//点击注册
			sign() {
				// 非空校验
				if (this.user.username === '' && this.user.password === '') {
					this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						color: '#fff',
						bgColor: '#FABEBE',
						message: '用户名密码不能为空',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				} else if(!this.reg.test(this.user.password)){
					this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						color: '#fff',
						bgColor: '#FABEBE',
						message: '密码8-16位',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}else{
					this.$refs.uNotify.show({
						top: 10,
						type: 'success',
						color: '#fff',
						bgColor: '#5AC725',
						message: '注册成功，请登录',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}
			}
		},
	}
</script>

<style>
	.mylog {
		width: 100%;
		height: 200px;
	}
</style>